<template>
	<view>
		<view class="header">
			<u-tabs :list="list" :scrollable="false" bg-color="#f7f7f7" :current="current" @change="change"></u-tabs>
			<view class="tips">请选择日期以查询流水明细</view>
			<uni-datetime-picker type="date" :clear-icon="false" @change="maskClick1" />
		</view>
		<view class="table" v-if="code == 1">
			<uni-table border stripe emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center" v-if="current == 0">支付宝余额</uni-th>
					<uni-th align="center" v-if="current == 2">抖音余额</uni-th>
					<uni-th align="center" v-if="current == 0">支付宝进账金额</uni-th>
					<uni-th align="center" v-if="current == 2">抖音进账金额</uni-th>
					<uni-th align="center" v-if="current == 0">支付宝提现金额</uni-th>
					<uni-th align="center" v-if="current == 2">抖音提现金额</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr>
					<uni-td v-if="current == 0" align="center">{{index_data.alipay_balance}}</uni-td>
					<uni-td v-if="current == 2" align="center">{{index_data.hz_balance}}</uni-td>
					<uni-td v-if="current == 0" align="center">{{index_data.alipay_entry}}</uni-td>
					<uni-td v-if="current == 2" align="center">{{index_data.hz_entry}}</uni-td>
					<uni-td v-if="current == 0" align="center">{{index_data.alipay_with}}</uni-td>
					<uni-td v-if="current == 2" align="center">{{index_data.hz_with }}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<view class="container" v-if="code == 1">
			<view class="" v-if="current == 0 || current == 2">
				<view class="" v-if="tableData.length > 0">
					<view class="content" v-for="(item,index) in tableData" :key="index">
						<uni-card>
							<view class="box">
								<view class="left">动账时间：</view>
								<view class="right">{{item.time}}</view>
							</view>
							<view class="box">
								<view class="left">订单号：</view>
								<view class="right">{{item.orderId}}</view>
							</view>
							<view class="box">
								<view class="left">商户号:</view>
								<view class="right">{{item.dy_merchant_id}}</view>
							</view>
							<view class="box">
								<view class="left">交易单号：</view>
								<view class="right">{{item.dy_settle_no}}</view>
							</view>
							<view class="box">
								<view class="left">关联单号：</view>
								<view class="right">{{item.settle_no}}</view>
							</view>
							<view class="box">
								<view class="left">交易类型:</view>
								<view class="right">{{item.type}}</view>
							</view>
							<view class="box">
								<view class="left">账户类型:</view>
								<view class="right">{{item.settle_pay_type}}</view>
							</view>
							<view class="box">
								<view class="left">收支金额：</view>
								<view class="right">{{item.price}}</view>
							</view>
							<view class="box">
								<view class="left">账户余额：</view>
								<view class="right">{{item.balance}}</view>
							</view>
							<view class="box">
								<view class="left">说明：</view>
								<view class="right">{{item.text}}</view>
							</view>
							<view class="box" v-if="menus.includes('chakanguanliandingdan')">
								<view class="left" style="width: 240rpx;">操作：</view>
								<u-button text="查看关联订单" type="primary" @click="reStore(item)"></u-button>
							</view>
						</uni-card>
					</view>
				</view>
				<view v-else class="np f-c-c">
					<view class="iconfont icon-queshengtu cb" style="font-size: 90rpx;"></view>
					<view class="f12 cb mt20">今日暂无数据</view>
				</view>
			</view>
			<view class="" v-else>
				<view v-if="tableData.length > 0">
					<view class="content" v-for="(item,index) in tableData" :key="index">
						<uni-card>
							<view class="box">
								<view class="left">订单:</view>
								<view class="right">{{item.subject}}</view>
							</view>
							<view class="box">
								<view class="left">订单号:</view>
								<view class="right">{{item.order_no}}</view>
							</view>
							<view class="box">
								<view class="left">订单结算时间：</view>
								<view class="right">{{item.settle_time}}</view>
							</view>

							<view class="box">
								<view class="left">结算完成时间：</view>
								<view class="right">{{item.settle_success_time}}</view>
							</view>
							<view class="box">
								<view class="left">配送完成时间:</view>
								<view class="right">{{item.delivery_end_time}}</view>
							</view>
							<view class="box">
								<view class="left">商户的比例（百分比）:</view>
								<view class="right">{{item.store_ratio}}%</view>
							</view>
							<view class="box">
								<view class="left">商户的应得金额：</view>
								<view class="right">{{item.store_price}}</view>
							</view>
							<view class="box">
								<view class="left">服务商的抽佣比例（百分比）：</view>
								<view class="right">{{item.oem_ratio}}%</view>
							</view>
							<view class="box">
								<view class="left">服务商抽佣金额：</view>
								<view class="right">{{item.oem_price}}</view>
							</view>
							<view class="box">
								<view class="left">cps抽佣比例（百分比）：</view>
								<view class="right">{{item.cps_ratio}}%</view>
							</view>
							<view class="box">
								<view class="left">cps抽佣金额：</view>
								<view class="right">{{item.cps_price}}</view>
							</view>
							<view class="box">
								<view class="left">抖音抽佣金额（百分比）：</view>
								<view class="right">{{item.dy_ratio}}%</view>
							</view>
							<view class="box">
								<view class="left">抖音抽佣金额：</view>
								<view class="right">{{item.dy_price}}</view>
							</view>
						</uni-card>
					</view>
				</view>
				<view v-else class="np f-c-c">
					<view class="iconfont icon-queshengtu cb" style="font-size: 90rpx;"></view>
					<view class="f12 cb mt20">今日暂无数据</view>
				</view>
			</view>
		</view>
		<view v-else class="np f-c-c">
			<view class="iconfont icon-queshengtu cb" style="font-size: 90rpx;"></view>
			<view class="f12 cb mt20">今日暂无流水明细</view>
		</view>
		<u-popup :show="recycShow" :closeOnClickOverlay="true" @close="recycShow = false">
			<view class="popup" v-if="recycyTableData.length > 0">
				<view class="box">
					<view class="left">订单号：</view>
					<view class="right">{{recycyTableData[0].order_no}}</view>
				</view>
				<view class="box">
					<view class="left">抖音侧id：</view>
					<view class="right">{{recycyTableData[0].order_id}}</view>
				</view>
				<view class="box">
					<view class="left">主体：</view>
					<view class="right">{{recycyTableData[0].subject}}</view>
				</view>
				<view class="box">
					<view class="left">配送完成时间：</view>
					<view class="right">{{recycyTableData[0].delivery_end_time}}</view>
				</view>
				<view class="box">
					<view class="left">商户的比例（百分比）：</view>
					<view class="right">{{recycyTableData[0].store_ratio}}</view>
				</view>
				<view class="box">
					<view class="left">商户的应得金额：</view>
					<view class="right">{{recycyTableData[0].store_price}}</view>
				</view>
				<view class="box">
					<view class="left">服务商的抽佣比例（百分比）：</view>
					<view class="right">{{recycyTableData[0].oem_ratio}}</view>
				</view>
				<view class="box">
					<view class="left">服务商抽佣金额：</view>
					<view class="right">{{recycyTableData[0].oem_price}}</view>
				</view>
				<view class="box">
					<view class="left">cps抽佣比例（百分比）：</view>
					<view class="right">{{recycyTableData[0].cps_ratio}}</view>
				</view>
				<view class="box">
					<view class="left">cps抽佣金额：</view>
					<view class="right">{{recycyTableData[0].cps_price}}</view>
				</view>
				<view class="box">
					<view class="left">抖音抽佣比例（百分比）：</view>
					<view class="right">{{recycyTableData[0].dy_ratio}}</view>
				</view>
				<view class="box">
					<view class="left">抖音抽佣金额：</view>
					<view class="right">{{recycyTableData[0].dy_price}}</view>
				</view>
				<view class="box">
					<view class="left">结算订单时间：</view>
					<view class="right">{{recycyTableData[0].settle_time}}</view>
				</view>
				<view class="box">
					<view class="left">结算完成的时间：</view>
					<view class="right">{{recycyTableData[0].settle_success_time}}</view>
				</view>
			</view>
			<view v-else
				style="display: flex; align-items: center; justify-content: center; height: 500rpx;color: red;">暂无数据
			</view>
		</u-popup>
		<view class="export">
			<u-button text="导出账单" type="success" @click="open()"></u-button>
		</view>
		<u-calendar :show="calendarShow" mode="range" :showMark="true" @confirm="confirm" :closeOnClickOverlay="true"
			@close="calendarShow = false" monthNum="13" :minDate="minDate" :maxDate="maxDate" :defaultDate="defaultDate"></u-calendar>
	</view>
</template>

<script>
	import config from '@/custom/config.js';
	import {
		mapState,
	} from 'vuex'
	export default {
		data() {
			return {
				code: "",
				show: false,
				title: '',
				date: '',
				tableData: [],
				list: [{
						index: 0,
						name: '支付宝'
					},
					{
						index: 1,
						name: '未结算'
					}, {
						index: 2,
						name: '抖音'
					},
				],
				current: 0,
				recycShow: false,
				recycyTableData: [],
				index_data: [],
				calendarShow: false,
				minDate:'',
				maxDate:'',
				defaultDate:[]
			}
		},
		computed: {
			...mapState({
				menus: state => state.menus,
			}),
		},
		methods: {
			change(e) {
				console.log(e.index)
				this.current = e.index;
				this.tableData = []
				this.getOrderRecord()
			},
			maskClick1(e) {
				console.log(e)
				this.date = e.split("-").join("");
				this.getOrderRecord()
			},
			getOrderRecord() {
				this.tableData = []
				var data = uni.getStorageSync("adminInfo")
				var oem_id = data.oem_id
				uni.showLoading()
				this.beg.request({
					url: '/index.php/admin/store.Store/query_dy_order_record_v2',
					method: "post",
					data: {
						oem_id: oem_id,
						date: this.date
					}
				}).then(res => {
					this.code = res.code
					if (res.code == 1) {
						uni.hideLoading()
						this.index_data = res.data.index_data;
						if (this.current == 0) {
							this.tableData = res.data.settle_data.alipay_data;
							this.tableData.forEach((item) => {
								if (item.order_data) {
									item.orderId = item.order_data.order_no
								}
							})
						} else if (this.current == 2) {
							this.tableData = res.data.settle_data.hz_data;
							console.log(this.tableData);
							this.tableData.forEach((item) => {
								if (item.order_data) {
									item.orderId = item.order_data.order_no
								}
							})

						} else {
							this.tableData = res.data.not_settle_order_data
							this.tableData.forEach((item) => {
								if (item.order_data) {
									item.orderId = item.order_data.order_no
								}
							})
							this.tableData.forEach((v) => {
								v.store_price = v.store_price / 100
								v.product_store_price = v.product_store_price / 100
								v.partner_price = v.partner_price / 100
								v.oem_price = v.oem_price / 100
								v.dy_price = v.dy_price / 100
								v.cps_price = v.cps_price / 100
								v.total_com = v.total_com / 100
							})
						}
					} else {
						uni.hideLoading()
					}
				})
			},
			getdate() {
				const today = new Date();
				today.setDate(today.getDate() - 1);
				const year = today.getFullYear();
				const month = (today.getMonth() + 1).toString().padStart(2, '0');
				const day = today.getDate().toString().padStart(2, '0');
				this.date = `${year}${month}${day}`;
			},
			reStore(val) {
				this.recycShow = true
				this.recycyTableData = []
				if (val.order_data) {
					this.recycyTableData.push(val.order_data)
				}
				this.recycyTableData.forEach((v) => {
					v.store_price = v.store_price / 100
					v.product_store_price = v.product_store_price / 100
					v.partner_price = v.partner_price / 100
					v.oem_price = v.oem_price / 100
					v.dy_price = v.dy_price / 100
					v.cps_price = v.cps_price / 100
					v.total_com = v.total_com / 100
				})
			},
			open() {
				this.calendarShow = true
			},
			// 导出
			confirm(e) {
				this.calendarShow = false
				uni.showLoading()
				var adminInfo = uni.getStorageSync("adminInfo")
				var oem_id = adminInfo.oem_id
				uni.request({
					url: 'https://life.kdsh.cc/admin/order.ExcelOut/get_day_data',
					data: {
						page: 1,
						limit: 10,
						start_date: e[0],
						end_date: e[1],
						oem_id: oem_id
					},
					method: "POST",
					header: {
						Accept: "application/json, text/plain, */*",
						contentType: config.contentType,
						agentId: adminInfo.agent_id,
						batoken: adminInfo.token,
						chainStoresId: adminInfo.chain_stores_id,
						oemId: adminInfo.oem_id,
						partnerId: adminInfo.partner_id,
						server: "true",
						storeId: adminInfo.store_id,
						thinkLang: "zh-cn",
					},
					responseType: 'arraybuffer',
					success(res) {
						const now = new Date();
						const fileName = now.toISOString() + '.xlsx';
						const arrayBuffer = res.data; // utf-8编码的文件数据
						const base64String = uni.arrayBufferToBase64(arrayBuffer);
						const buffer = uni.base64ToArrayBuffer(base64String);
						let fs = uni.getFileSystemManager();
						const filePath = wx.env.USER_DATA_PATH + '/' + fileName;
						fs.writeFile({
							filePath: filePath,
							data: buffer,
							encoding: 'binary',
							success: (res) => {
								uni.hideLoading()
								console.log('文件保存成功', res);
								uni.openDocument({
									filePath: filePath,
									showMenu: true,
									success: (res) => {
										console.log('文件预览成功');
										// 构建分享内容
									},
									fail: (error) => {
										console.error('文件保存失败', error);
									}
								})

							},
							fail(err) {
								uni.hideLoading()
							}

						})
					}
				})
			},
			chooseTimed() {
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (month <= 9) {
					month = '0' + month;
				}
				if (day <= 9) {
					day = '0' + day;
				}
				let minyear = year - 1;
				this.minDate = minyear + '-' + month + '-' + day;
				let maxyear = year + 1;
				this.maxDate = year + '-' + month + '-' + day;
				this.defaultDate[0] = year + '-' + month + '-' + day;
			}
		},
		onLoad(option) {
			const time = option.time
			const pages = getCurrentPages();
			const currentPage = pages[pages.length - 1];
			const prevPage = pages[pages.length - 2];
			if (prevPage) {
				if (prevPage.route == 'pages/home/recordDetail/recordDetail') {
					var newTime = time.substring(0, 10)
					var newTime2 = newTime.replace(/-/g, '')
					this.date = newTime2
					this.getOrderRecord()
				} else {
					this.getdate()
					this.getOrderRecord()
				}
			}
			this.chooseTimed()
		}
	}
</script>
<style>
	page {
		background-color: #f7f7f7;
	}
</style>
<style lang="scss" scoped>
	::v-deep .u-calendar__action {
		display: flex;
		align-items: center;
	}

	.header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background: #fff;
		z-index: 999;
	}

	.tips {
		width: 100%;
		height: 55rpx;
		color: #70c547;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
	}

	.box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;

		.left {
			font-size: 30rpx;
			font-weight: 500;
			color: #000;
		}
	}

	.np {
		height: 1400rpx;
	}

	.popup {
		padding: 20rpx;
	}

	.export {
		width: 200rpx;
		height: 100rpx;
		position: fixed;
		bottom: 100rpx;
		left: 38%;
	}

	.table {
		margin-top: 209rpx;
	}
</style>